<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="filters">
				<el-form-item>
					<el-input v-model="filters.cityId" placeholder="城市ID"></el-input>
				</el-form-item>
				<el-form-item>
					<el-input v-model="filters.stationName" placeholder="站点名称"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="handleFilter">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleAdd">新增</el-button>
				</el-form-item>
			</el-form>
		</el-col>
		<!--列表-->
		<el-table :data="list" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
			<el-table-column prop="id" type="selection" width="60">
			</el-table-column>
			<el-table-column prop="id" label="ID" width="60">
			</el-table-column>
      		<el-table-column prop="name" label="站点名称"  width="160">
			</el-table-column>
			<el-table-column prop="cityId" label="所属城市"  width="120">
			</el-table-column>
			<el-table-column prop="deliverPoint" label="自提点"  width="180">
			</el-table-column>
			<el-table-column prop="rallyPoint" label="闪送集结点"  width="180">
			</el-table-column>
			
     		 <el-table-column prop="display" label="显示" width="80">
				<template slot-scope="scope">
				<span>{{ 0==scope.row.buyAim?"否":"是"}}</span>
				</template>
			</el-table-column>
				<el-table-column label="操作" min-width="180">
				<template slot-scope="scope">
          		<el-button  type="warning" size="small" @click="handleEdit(scope.row)">编辑</el-button>
				<el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!--工具条-->
		<el-col :span="24" class="toolbar">
			<el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
			<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="20" :total="total" style="float:right;">
			</el-pagination>
		</el-col>
		   		<!--新增界面-->
		<el-dialog title="新增" v-model="addFormVisible" :close-on-click-modal="false">
			<el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">
				<el-form-item label="名称" prop="name">
					<el-input v-model="addForm.name" auto-complete="off" class="form_input"></el-input>
				</el-form-item>
				<el-form-item label="城市ID" prop="cityId">
					<el-input v-model="addForm.cityId" auto-complete="off" class="form_input"></el-input>
				</el-form-item>
				<el-form-item label="自提货地点" prop="deliverPoint">
					<el-input v-model="addForm.deliverPoint" auto-complete="off" class="form_input"></el-input>
				</el-form-item>
				<el-form-item label="送货地点" prop="rallyPoint">
					<el-input v-model="addForm.rallyPoint" auto-complete="off" class="form_input"></el-input>
				</el-form-item>
				<el-form-item label="是否显示" prop="display">
					<el-select v-model="addForm.display" placeholder="是否显示">
						<el-option label="否" value="0"></el-option>
						<el-option label="是" value="1"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="addFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
			</div>
		</el-dialog>

    <!--编辑界面-->
		<el-dialog title="编辑" v-model="editFormVisible" :close-on-click-modal="false">
			<el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="editForm">
				<el-form-item label="ID" prop="id">
					<el-input v-model="editForm.id" auto-complete="off" class="form_input"></el-input>
				</el-form-item>
				<el-form-item label="名称" prop="name">
					<el-input v-model="editForm.name" auto-complete="off" class="form_input"></el-input>
				</el-form-item>
				<el-form-item label="城市ID" prop="cityId">
					<el-input v-model="editForm.cityId" auto-complete="off" class="form_input"></el-input>
				</el-form-item>
				<el-form-item label="自提货地点" prop="deliverPoint">
					<el-input v-model="editForm.deliverPoint" auto-complete="off" class="form_input"></el-input>
				</el-form-item>
				<el-form-item label="送货地点" prop="rallyPoint">
					<el-input v-model="editForm.rallyPoint" auto-complete="off" class="form_input"></el-input>
				</el-form-item>
				<el-form-item label="是否显示" prop="display">
					<el-select v-model="editForm.display" placeholder="是否显示">
						<el-option label="否" value="0"></el-option>
						<el-option label="是" value="1"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="editFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
			</div>
		</el-dialog>
	</section>
</template>

<script>
import util from "../../common/js/util";
//import NProgress from 'nprogress'
import {
  fetchStations,
  removeStation,
  batchremoveStation,
  editStation,
  addStation
} from "../../api/api";
export default {
  data() {
    return {
      filters: {
        cityId: undefined,
        stationName: undefined
      },
      list: [],
      total: 0,
      currentPage: 1,
      listLoading: false,
      sels: [], //列表选中列

      addFormVisible: false, //新增界面是否显示
      addLoading: false,
      addFormRules: {
        name: [{ required: true, message: "名称", trigger: "blur" }],
        cityId: [{ required: true, message: "城市ID", trigger: "blur" }],
        deliverPoint: [
          { required: true, message: "自提货地点", trigger: "blur" }
        ],
        rallyPoint: [{ required: true, message: "送货地点", trigger: "blur" }],
        display: [{ required: false, message: "是否显示", trigger: "blur" }]
      },

      //新增界面数据
      addForm: {
        name: "",
        cityId: "",
        deliverPoint: "",
        rallyPoint: "",
        display: undefined
      },

      editFormVisible: false, //编辑界面是否显示
      editLoading: false,
      editFormRules: {
        name: [{ required: true, message: "名称", trigger: "blur" }],
        cityId: [{ required: true, message: "城市ID", trigger: "blur" }],
        deliverPoint: [
          { required: true, message: "自提货地点", trigger: "blur" }
        ],
        rallyPoint: [{ required: true, message: "送货地点", trigger: "blur" }],
        display: [{ required: false, message: "是否显示", trigger: "blur" }]
      },
      //编辑界面数据
      editForm: {
        id: "",
        name: "",
        cityId: "",
        deliverPoint: "",
        rallyPoint: "",
        display: undefined
      }
    };
  },
  methods: {
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getList();
    },
    handleFilter() {
      this.getList();
    },
    //获列表
    getList() {
      this.listLoading = true;
      //NProgress.start();
      fetchStations(this.filters).then(res => {
        console.log(res);
        this.total = res.data.total;
        this.list = res.data.stations;
        this.listLoading = false;
        //NProgress.done();
      });
    },
    //删除
    handleDel: function(index, row) {
      this.$confirm("确认删除该记录吗?", "提示", {
        type: "warning"
      })
        .then(() => {
          this.listLoading = true;
          //NProgress.start();
          let para = { id: row.id };
          removeStation(para).then(res => {
            this.listLoading = false;
            //NProgress.done();
            this.$message({
              message: "删除成功",
              type: "success"
            });
            this.getList();
          });
        })
        .catch(() => {});
    },
    selsChange: function(sels) {
      this.sels = sels;
    },
    //批量删除
    batchRemove: function() {
      var ids = this.sels.map(item => item.id);
      this.$confirm("确认删除选中记录吗？", "提示", {
        type: "warning"
      })
        .then(() => {
          this.listLoading = true;
          //NProgress.start();
          let para = { ids: ids };
          batchremoveStation(para).then(res => {
            this.listLoading = false;
            //NProgress.done();
            this.$message({
              message: "删除成功",
              type: "success"
            });
            this.getList();
          });
        })
        .catch(() => {});
    },
    //显示新增界面
    handleAdd: function() {
      this.addFormVisible = true;
      this.addForm = {
        name: "",
        cityId: "",
        deliverPoint: "",
        rallyPoint: "",
        display: undefined
      };
    },
    //新增
    addSubmit: function() {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          this.$confirm("确认提交吗？", "提示", {}).then(() => {
            this.addLoading = true;
            //NProgress.start();
            let para = Object.assign({}, this.addForm);
            addStation(para).then(res => {
              this.addLoading = false;
              //NProgress.done();
              this.$message({
                message: "提交成功",
                type: "success"
              });
              this.$refs["addForm"].resetFields();
              this.addFormVisible = false;
              this.getList();
            });
          });
        }
      });
    },
    //显示编辑界面
    handleEdit: function(row) {
      this.editFormVisible = true;
      this.editForm = Object.assign({}, row);
    },
    //编辑
    editSubmit: function() {
      this.$refs.editForm.validate(valid => {
        if (valid) {
          this.$confirm("确认提交吗？", "提示", {}).then(() => {
            this.editLoading = true;
            //NProgress.start();
            let para = Object.assign({}, this.editForm);
            editProduct(para).then(res => {
              this.editLoading = false;
              //NProgress.done();
              this.$message({
                message: "提交成功",
                type: "success"
              });
              this.$refs["editForm"].resetFields();
              this.editFormVisible = false;
              this.getList();
            });
          });
        }
      });
    }
  },
  mounted() {
    this.getList();
  }
};
</script>

<style scoped>
</style>